<template>

  <el-button size="default" type="default" @click="backToList()">返回</el-button>
    <el-descriptions column="2">
        <el-descriptions-item label="名称：">{{ dataDetail.name }}</el-descriptions-item>
        <el-descriptions-item label="类型：">
            <el-tag>{{ typeMap.get(dataDetail.type) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="头像：">
            <el-image :src="dataDetail.headIconUrl" />
        </el-descriptions-item>
        <el-descriptions-item label="价格：">{{ dataDetail.price }}</el-descriptions-item>
        <el-descriptions-item label="卖家：">{{ dataDetail.creatorName }}</el-descriptions-item>
        <el-descriptions-item label="剩余数量：">{{ dataDetail.remainNum }}</el-descriptions-item>
        <el-descriptions-item label="发布时间：">{{ dataDetail.gmtCreateTime }}</el-descriptions-item>
        <el-descriptions-item label="交易方式：">{{ tradeTypeMap.get(dataDetail.tradeType) }}</el-descriptions-item>
        <el-descriptions-item label="售卖状态：">{{ statusMap.get(dataDetail.status) }}</el-descriptions-item>

    </el-descriptions>
    <hr>
    <el-descriptions column="1">
        <el-descriptions-item label="描述：">{{ dataDetail.content }}</el-descriptions-item>
        <el-descriptions-item label="其他图片：">{{ dataDetail.pictureUrlList }}</el-descriptions-item>
    </el-descriptions>

    <el-button v-if="dataDetail.status === 1" type="primary" size="large" @click="wait()">
        购买
    </el-button>
    <el-button v-if="dataDetail.status === 1" type="primary" size="large" @click="wait()">
        与卖家沟通
    </el-button>
  <el-button size="default" type="default" @click="getDetail()">获取数据</el-button>



</template>

<script setup>
import {ref} from "vue";
import {getPostList} from "@/api/request";
import {Search} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import {useRoute, useRouter} from "vue-router/dist/vue-router";

const pageNum = ref(1)
const pageSize = ref(10)
const pageSizeList = ref([10, 20, 30, 40])
const total = ref(0)
const startTime = ref("")
const endTime = ref("")
const loginUserId = ref("")
const loginUserName = ref("")
const router = useRouter()
const route = useRoute()

const tradeTypeMap = ref(new Map([
    ['0', "社区货币"],
    ['1', "微信"],
    ['2', "支付宝"],
    ['3', "物物交换"],
    ['4', "免费"],
    ['5', "自定义"]
]))

const typeMap = ref(new Map([
    ['1', "游戏账号"],
    ['2', "游戏装备"],
    ['3', "游戏外设"],
    ['4', "其他内容"]
]))
const statusMap = ref(new Map([
    ['0', "待审核"],
    ['1', "在售"],
    ['2', "售罄"],
    ['3', "已下架"],
    ['4', "被屏蔽"]
]))


const reqParam = ref({
    loginUserId: "",
    loginUserName: "",
    pageNum: 1,
    pageSize: 20,
    startTime: "",
    endTime: "",
    searchContent:""
})
const dataDetail = ref({})

// const manualList = ref([
//     {
//         id: "",
//         gameId: "",
//         title: "",
//         content: "",
//         filedContent: "",
//         status: "",
//         creatorId: "",
//         creatorName: "",
//         gmtCreateTime: "",
//         modifierId: "",
//         modifierName: "",
//         gmtModifyTime: "",
//         headUrl: ""
//     }, {
//         id: "2",
//         gameId: "1",
//         title: "阿修罗",
//         content: "介绍介绍介绍介绍介绍",
//         filedContent: "攻击力1000",
//         status: "1",
//         creatorId: "",
//         creatorName: "",
//         gmtCreateTime: "",
//         modifierId: "",
//         modifierName: "",
//         gmtModifyTime: "",
//         headUrl: ""
//     }, {
//         id: "3",
//         gameId: "1",
//         title: "缘结神",
//         content: "介绍介绍介绍介绍介绍",
//         filedContent: "攻击力1000",
//         status: "1",
//         creatorId: "",
//         creatorName: "",
//         gmtCreateTime: "",
//         modifierId: "",
//         modifierName: "",
//         gmtModifyTime: "",
//         headUrl: ""
//     }
// ])

function handleSizeChange() {
    // 再次请求
    getList(reqParam.value)
}
function handleCurrentChange() {
    getList(reqParam.value)
}
async function getList(req) {
    req.pageNum = pageNum.value
    req.pageSize = pageSize.value
    let param = reqParam.value
    req.searchContent = param.searchContent
    let resp = await getPostList(req, "/commodity/list");
    console.log(resp)
    dataList.value = resp.list
    total.value = resp.total
}

function resetCondition() {
    reqParam.value = {
        pageNum: 1,
        pageSize: 20,
        startTime: "",
        endTime: "",
        searchContent:""
    }
    pageNum.value = 1
    pageSize.value = 20
    getList(reqParam)
}
async function getDetail() {
  let resp = await getPostList({
    id: route.params.id
  }, "/commodity/detail")
  console.log(resp)
  dataDetail.value = resp.data
}


const dataList = ref([])

function backToList() {
  router.back()
}

function wait() {
  ElMessage.info("功能开发中，敬请期待....")
}


</script>

<style scoped>


.selectInput {
    margin: 10px;
    width: 100%;
    height: 25%;
}

#list {
    font-size: 1em;
}
.liStyle {
    padding: 0;
    align-self: center;
    align-content: center;
    background-color: gray;
    margin: 0;
    list-style: none;
    height: 50px;
    width: 100%;
    background-color: #d3d4d6;
    border-width: 3px;
    border-color: black;

}
.bottom-font {
    width: 100%;
    height: 80px;
    font-size: 10px;
    padding: 0;
}


</style>